<template>
  <div>
    <h3 v-if="userInfo.shopName.length > 0" class="shopName">{{ userInfo.shopName }}</h3>
    <h3 v-else class="shopName">菜单列表</h3>
    <div id="Shopkeeper">
      <p>商家地址：{{ userInfo.shopAddress }}</p>
      <p>联系电话：{{ userInfo.phone }}</p>
    </div>
    <el-container>
      <el-aside width="20%">
        <el-row class="tac">
          <el-col :span="10">
            <!-- router开启路由模式，打开后index为对应路由，也可关闭路由模式使用<router-link to="/orderList">折扣</router-link> -->
            <el-menu
              :default-active="activeIndex"
            >
              <el-menu-item key="0" index="0" @click="getFoodList(0)">
                <span slot="title">折扣</span>
              </el-menu-item>
              <el-menu-item v-for="item in typeList" :key="item.id" :index="item.id" @click="getFoodList(item.id)">
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <template>
          <div v-if="FoodList.length > 0 && typeList.length > 0">
            <div v-for="item in FoodList" :key="item.idm">
              <div id="food" slot="title">
                <div id="foodImg" class="block">
                  <div v-if="item.isHot === 1">
                    <el-badge value="招牌" class="item">
                      <el-image style="width: 80px; height: 80px;border-radius: 10px;" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" />
                    </el-badge>
                  </div>
                  <div v-else>
                    <el-image style="width: 80px; height: 80px;border-radius: 10px;" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" />
                  </div>
                </div>
                <div id="foodInfo" class="block">
                  <div id="name"><span>{{ item.name }}</span></div>
                  <div id="remark"><span>{{ item.remark }}</span></div>
                  <div id="price">
                    <svg t="1648804067089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2221" width="10" height="10"><path d="M892.342857 463.238095v-97.523809h-292.571428l175.542857-307.2-82.895238-48.761905-180.419048 312.07619L331.580952 9.752381l-82.895238 48.761905 175.542857 307.2h-292.571428v97.523809h331.580952v165.790476H131.657143v97.52381h331.580952v287.695238h97.52381v-287.695238h331.580952v-97.52381h-331.580952V463.238095z" p-id="2222" /></svg>
                    <span>{{ item.price }}元/{{ item.priceUnit }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <el-empty :image-size="200" />
          </div>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import { getWbeRoot } from '../../api/web-site'

export default {
  data () {
    return {
      /* 菜单列表 */
      FoodList: [
        {
          id: '',
          name: '',
          remark: '',
          img: '',
          price: '',
          priceUnit: '',
          isHot: ''
        }
      ],

      /* 菜品分类列表 */
      typeList: [
        {
          id: '',
          name: ''
        }
      ],

      /* 商家信息 */
      userInfo: {
        shopName: '',
        phone: '',
        shopAddress: ''
      },

      /* 当前商家id */
      userId: '',

      /* 当前默认选中分类 */
      activeIndex: ''

    }
  },

  created () {
    if (this.$route.query.userId === undefined || this.$route.query.userId === '') {
      this.$router.push('*')
    } else {
      this.userId = this.$route.query.userId
      console.log("this.userId: "+this.userId)
    }
    this.getUserInfo()
    this.getTypeList()
    this.getFoodList('')
  },

  methods: {

    /*
     *查找菜品分类
     * userId：商家id
     * return：菜单列表
     */
    getTypeList () {
      axios.get(getWbeRoot() + '/api/foodType/findAll', {
        params: {
          userId: this.userId
        }
      }).then(
        response => {
          this.typeList = response.data
          if (this.typeList.length > 0) {
            this.activeIndex = this.typeList[0].id.toString()
          } else {
            this.activeIndex = '0'
          }
        }
      )
    },

    /*
     *查找菜单列表
     * foodTypeId ：菜品类型id
     * userId：商家id
     * return：菜单列表
     */
    getFoodList (val) {
      axios.get(getWbeRoot() + '/api/food/findByType', {
        params: {
          foodTypeId: val,
          userId: this.userId
        }
      }).then(
        response => {
          const data = response.data
          for (let i = 0; i < data.length; i++) {
            const val = data[i].remark
            if (val.length > 22) {
              data[i].remark = val.substring(0, 23) + '...'
            }
          }

          this.FoodList = data
        }
      )
    },

    /*
     *获取商家信息
     */
    getUserInfo () {
      axios.get(getWbeRoot() + '/api/sysUser/getUserById', {
        params: {
          userId: this.userId
        }
      }).then(
        response => {
          if (response.status === 200) {
            this.userInfo = response.data
          }
        }
      )
    }
  }
}
</script>

<style scoped>
  .shopName {
    text-align: center;
  }

  .el-menu {
    width: 100px;
  }

  #Shopkeeper {
    background-color: #66b1ff;
    height: 50px;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  div > p {
    font: 14px "Micorsoft YaHei";
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 5px;
  }

  .el-aside {
    height: calc(90vh - 50px - 25px);
  }

  .el-main {
    height: calc(90vh - 50px - 25px);
  }

  #food {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 100px
  }

  #foodImg {
    float: left;
    width: 35%;
    padding-top: 10px;
    padding-left: 5px;
  }

  #foodInfo {
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    float: right;
    height: 100%;
    width: 60%;
  }

  #name {
    padding-top: 10px;
    text-align: center;
    height: 20%;
  }

  #remark {
    height: 40%;
    font-size: 10px;
  }

  #price {
    height: 20%;
    padding-bottom: 10px;
  }
</style>
